<script setup lang="ts">
import { useRouter } from 'vue-router';
import { categoryGet } from '@/services/index.ts';
import type { Category } from '@/types/home.ts';

const $router = useRouter();
const tagList = ref<Category[]>([]);
const onTabClickTab = (tabs: any) => {
  const selectedTag = tagList.value[tabs.name].tagId;
  $router.push({ path: '/tagsCategory', query: { tagId: selectedTag } });
};

const loadData = async () => {
  const { data, err } = await categoryGet();
  if (err) {
    showToast(err);
  } else {
    tagList.value = data.tagList;
  }
};
onMounted(() => {
  loadData();
});

defineExpose({
  tagList,
});
</script>

<template>
  <van-tabs v-if="tagList.length !== 0" @click-tab="onTabClickTab">
    <van-tab v-for="tab in tagList" :title="tab.tagName" :key="tab.id"></van-tab>
  </van-tabs>
</template>

<style scoped lang="scss">
/** 去除滚动条样式 */
:deep(.van-tabs__line) {
  height: 0;
}

:deep(.van-tab--active),
:deep(.van-tab__text) {
  color: #323233;
  font-size: 15px;
  font-weight: 600;
}
</style>
